<template>
  <div class="guide">
    <van-swipe class="my-swipe" vertical :autoplay="3000" >
      <van-swipe-item v-for="(l, i) in banner" :key="i">
        <van-image :src="l.pic" class="g-img"></van-image>
        <van-button 
        class="g-btn" 
        type="primary" 
        v-if="i == banner.length - 1"
        @click="gotowhere(main)"
        >进入主页</van-button
        >
      </van-swipe-item>
    </van-swipe>

    <div class="countdown" @click="gotowhere('movie')">
        跳过<span v-if="count>0">{{count}}</span>
    </div>
  </div>
</template>


<script>
export default {
  name: "guide",
  data() {
    return {
        count:5,
        timer:null,
      banner: [
        { pic: require("@/assets/images/img1.jpg") },
        { pic: require("@/assets/images/img2.jpg") },
        { pic: require("@/assets/images/img3.jpg") },
        { pic: require("@/assets/images/img4.jpg") },
      ],
    };
  },
  methods: {
  },
  mounted () {
      this.timer = setInterval(()=>{
          if(this.count>0){
              this.count--
          }else{
               clearInterval(this.timer)
                this.timer = null
                this.gotowhere("main")
          }
      },1000)
  }
};
</script>


<style lang="scss" >
.guide {
  width: 100%;
  height: 100%;
  .countdown{
        position: absolute;
        top:20px;
        right:20px;
        border:1px solid #ccc;
        background: rgba(0,0,0,0.4);
        color:#fff;
        border-radius: 20px;
        width:70px;
        height:28px;
        line-height: 28px;
        z-index:1000;
        text-align: center;
    }
  .my-swipe {
    width: 100%;
    height: 100%;
    .g-img {
      width: 100%;
      height: 100%;
    }
    .g-btn {
      position: absolute;
      top: 100px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>